<template>
    <div class="favor">
      <van-nav-bar title=""  left-text="旅途" left-arrow @click-left="onClickLeft"/>
     
        <van-sticky>
        <van-tabs v-model:active="active" title-active-color="#ff9854"  >
         <template  v-for="(item, index) in titles" :key="index">
          <van-tab :title="item" ></van-tab>
         </template>
        </van-tabs>
      </van-sticky>
      <div class="favor" v-if="active===0">
        <van-tabs v-model:active="activeName">
          <van-tab title="房屋" name="house">
            <div class="content">
              <template v-for="(item , index) in favorlist" :key="index">
                <searchItem :item-data="item"></searchItem>
              </template>
            </div>
          </van-tab>
          <van-tab title="房东" name="landlord">
            <div class="content">
              <div class="list" v-if="landlordlist.length"></div>
              <div class="no-data" v-else>
                <img class="bg" src="@/assets/img/favor/empty_favorite.44731802.png" alt="">
                <div class="name">暂无收藏</div>
                <div class="desc">
                  点击
                  <img src="@/assets/img/favor/favor.png" alt="">
                  即可收藏对应的房东
                </div>
                <div class="btn" @click="handleBtnClick">
                  随便去逛逛
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <div class="history" v-else-if="active===1">
        <div class="content">
          <template v-for="(item, index) in historylist" :key="index">
            <searchItem :item-data="item"></searchItem>
          </template>
        </div>
      </div>
      
    </div>
  </template>
  
  <script setup>
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  import searchItem from "@/components/search-list-item/search-item.vue";
  import { getFavorlist,getHistoryList } from "@/services/modules/favor";
  const router = useRouter()
  const titles = ["我的收藏", "浏览历史"];
  const active=ref(0);
  const onClickLeft = () => {
      router.back();
  }
  const activeName = ref("house");

  const favorlist=ref([]);
  const historylist=ref([]);
const landlordlist = ref([]);

  getFavorlist().then((res)=>{
    favorlist.value=res.data.data.items || [];
    console.log(favorlist.value);
    
  })

  getHistoryList().then((res)=>{
    historylist.value=res.data.data.items || [];
    console.log(historylist.value);
    
  })
const handleBtnClick = () => {
  router.push("/");
}
  
  </script>
  
  <style lang="less" scoped>
  .content {
  padding: 10px 20px 55px 20px;
  .no-data {
    .bg{
      width: 100%;
    }
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .icon-no-data {
      width: 100%;
    }
    .name {
      color: #333;
      font-size: 18px;
      font-weight: 500;
      line-height: 27px;
    }
    .desp {
      color: #666;
      line-height: 18px;
      font-size: 14px;
      margin: 7px auto 36px;

      img {
        position: relative;
        top: 4px;
        width: 12px;
      }
    }
    .btn {
      padding: 0 38px;
      height: 40px;
      line-height: 40px !important;
      font-size: 16px;
      color: #fff;
      background: var(--primary-color);
      border-radius: 20px;
      border: none;
      outline: none;
    }
  }
}
  </style>